<template>
  <div>
    <el-button type="primary" @click="showDialog">新增</el-button>
    <el-table
      :data="tableData"
      style="width: 100%">
      <el-table-column
        prop="orderNumber"
        label="订单编号"
        width="180">
      </el-table-column>
      <el-table-column
        prop="model"
        label="物料编号"
        width="180">
      </el-table-column>
      <el-table-column
        prop="customerMaterialNum"
        label="客户物料编号">
      </el-table-column>
      <el-table-column
        prop="productType"
        label="产品类型">
      </el-table-column>
      <el-table-column
        prop="warehouse"
        label="仓库">
      </el-table-column>
      <el-table-column
        prop="isImported"
        label="是否进口产品">
      </el-table-column>
      <el-table-column
        prop="orderUnit"
        label="订货单位">
      </el-table-column>
      <el-table-column
        prop="orderQuantity"
        label="订货数量">
      </el-table-column>
      <el-table-column
        prop="listPrice"
        label="列表价格">
      </el-table-column>
      <el-table-column
        prop="price"
        label="价格">
      </el-table-column>
      <el-table-column
        prop="discountPercentage"
        label="折扣">
      </el-table-column>
      <el-table-column
        prop="dealPrice"
        label="成交价格">
      </el-table-column>
      <el-table-column
        prop="totalAmount"
        label="总金额">
      </el-table-column>
      <el-table-column
        prop="customerOrderNumber"
        label="客户订单编号">
      </el-table-column>
      <el-table-column
        prop="estimatedShipDate"
        label="预计发货日期">
      </el-table-column>
      <el-table-column
        prop="expectedShipDate"
        label="预计装运日期"
       >
      </el-table-column>
      <el-table-column
        prop="expectedDeliveryDate"
        label="预计提交日期">
      </el-table-column>
    </el-table>
   
    <el-dialog :visible.sync="dialogVisible" title="订单信息">
      <div>
        <el-card class="box-card" style="line-height: 3px;">
          <div slot="header" class="clearfix" style="height: 2px;">
            <span>信息填写</span>
          </div>
          <div class="text item">
            <div style="margin-left: 5px; display: inline-block;">
              填写人姓名：
              <el-input placeholder="请输入内容" v-model="customerOrder.submitterName" clearable style="width: 160px;margin-right:70px;margin-left:6px"></el-input>
            </div>
            <div style=" margin-left:6px;display: inline-block;">
              申请人姓名：
              <el-input placeholder="请输入内容" v-model="customerOrder.applicantName" clearable style="width: 160px;margin-right:10px;margin-left:6px"></el-input>
            </div>
          </div>

          <div class="text item" style="margin-top: 13px;">
            <div style="margin-left: 8px; display: inline-block;">
                所属地区：
                <el-select v-model="customerOrder.region" placeholder="请选择地区信息" clearable style="width: 160px;margin-right:100px;margin-left:6px">
                <el-option v-for="item in provinceList" :key="item.value" :label="item.label" :value="item.value"></el-option>
                </el-select>
            </div>
            <div style="margin-left: 1x; display: inline-block;">
                运费付款方式：
                <el-select v-model="customerOrder.freightPaymentMethod" placeholder="请选择付款方式" clearable style="width: 160px; margin-right: 10px; margin-left: 10px">
                <el-option v-for="item in paymentOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
                </el-select>
            </div>
          </div>

          <div class="text item" style="margin-top: 13px;">
            <div style="margin-left:13px; display: inline-block;">
                是否申请特价：
                <el-select v-model="customerOrder.isSpecialPriceRequested" clearable placeholder="请选择" style="width: 160px">
                    <el-option v-for="item in specialPriceOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
                </el-select>
                </div>
                <div style="margin-left:12px; display: inline-block;">
                是否Design-IN项目：
                <el-select v-model="customerOrder.isDesignInProject" clearable placeholder="请选择" style="width: 160px">
                    <el-option v-for="item in designInProjectOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
                </el-select>
                </div>
          </div>

          <div class="text item" style="margin-top: 13px;">
            <div style="margin-left: 13px; display: inline-block;">
              客户ID：
              <el-select v-model="customerOrder.customerId" clearable placeholder="请选择" style="width: 200px">
                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </div>
            <div style="margin-left: 55px; display: inline-block;">
                客户类型：
                <el-select v-model="customerOrder.customerType" clearable placeholder="请选择" style="width: 200px;">
                    <el-option label="个体" value="个体"></el-option>
                    <el-option label="私营" value="私营"></el-option>
                    <el-option label="国企" value="国企"></el-option>
                    <el-option label="小微企业" value="小微企业"></el-option>
                    <el-option label="外企" value="外企"></el-option>
                </el-select>
                </div>

          </div>
          <div class="text item" style="margin-top: 13px;">
            <div style="margin-left: 23px; display: inline-block;">
               申请日期：
              <el-date-picker v-model="customerOrder.applicationDate" type="date" value-format="yyyy-MM-dd" placeholder="选择日期"></el-date-picker>
            </div>
            <div style=" margin-left:1px;display: inline-block;">
              订货地址:
              <el-input placeholder="请输入内容" v-model="customerOrder.shippingAddress" clearable style="width: 200px;margin-right:10px;margin-left:10px"></el-input>
            </div>
          </div>

          <div class="text item" style="margin-top: 13px;">
            <div style="margin-left: 23px; display: inline-block;">
                订单类型：
                <el-select v-model="customerOrder.orderType" clearable placeholder="请选择" style="width: 200px;margin-right:10px;margin-left:10px;">
                    <el-option label="家用电器" value="家用电器"></el-option>
                    <el-option label="工业电器" value="工业电器"></el-option>
                    <el-option label="通信设备" value="通信设备"></el-option>
                    <el-option label="其他" value="其他"></el-option>
                </el-select>
                </div>

                <div style="margin-left: 21px; display: inline-block;">
                    订单来源：
                    <el-select v-model="customerOrder.orderSource" clearable placeholder="请选择" style="width: 200px;margin-right:10px;margin-left:10px;">
                        <el-option label="线上渠道" value="线上渠道"></el-option>
                        <el-option label="线下门店" value="线下门店"></el-option>
                        <el-option label="电话订购" value="电话订购"></el-option>
                        <el-option label="合作伙伴" value="合作伙伴"></el-option>
                        <el-option label="其他" value="其他"></el-option>
                    </el-select>
                    </div>

          </div>

        </el-card>

        <el-card class="box-card" style="line-height: 3px;margin-top:10px">
          <div slot="header" class="clearfix" style="height: 2px;">
            <span>货物填写</span>
          </div>
          <div class="text item" style="margin-left:18px;">
            样品单号：
            <el-input placeholder="请输入内容" v-model="customerOrder.sampleOrderNumber" clearable style="width: 160px;margin-right:40px"></el-input>
            客户期望发货日期：
            <el-date-picker v-model="customerOrder.customerExpectedDeliveryDate" type="date" value-format="yyyy-MM-dd" placeholder="选择日期"></el-date-picker>
         
          </div >

            <div class="text item" style="margin-left: 8px;margin-top:15px">
             客户期望收货日期：
            <el-date-picker v-model="customerOrder.customerExpectedReceiptDate" type="date" value-format="yyyy-MM-dd" placeholder="选择日期" class="custom-date-picker"></el-date-picker>
         
            预计发货日期：
            <el-date-picker v-model="customerOrder.estimatedDeliveryDate" type="date" value-format="yyyy-MM-dd" placeholder="选择日期" class="custom-date-picker"></el-date-picker>
         
            </div>
          <div class="text item" style="margin-left: 28px;margin-top:15px">
            货物重量：
            <el-input placeholder="请输入内容" v-model="customerOrder.weight" clearable style="width: 160px;margin-right:40px"></el-input>

            运输方式：
            <el-input placeholder="请输入内容" v-model="customerOrder.shippingMethod" clearable style="width: 160px;"></el-input>

          </div>
          <div class="text item" style="margin-left: 11px;margin-top:15px">

            <el-button type="primary" style="margin-left: 88px;" @click="submit">提交<i class="el-icon-success"></i></el-button>
          </div>
        </el-card>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
    data(){
        return{
            tableData: [],
            customerOrder:{},
            city1:'',
            city2:'',
            cityList1:'',
            cityList2:'',
            province1:'',
            province2:'',
            radio:'',
            dialogVisible:false,
            lading:{
                orderId:'',
                good:'',
                specification:'',
                num:'',
                toload:'',
                volume:'',
                departure:'',
                destination:'',
                putTime:''
            },
            specialPriceOptions: [
                { value: "是", label: "是" },
                { value: "否", label: "否" },
            ],
            designInProjectOptions: [
                { value: "是", label: "是" },
                { value: "否", label: "否" },
            ],
            paymentOptions: [
                { value: "货到付款", label: "货到付款" },
                { value: "在线支付", label: "在线支付" },
                { value: "银行转账", label: "银行转账" },
                { value: "支付宝", label: "支付宝" },
            ],
            provinceList:[ { value: "2", label: '北京市' },
                        { value: "3", label: '安徽省' },
                        { value: "4", label: '福建省' },
                        { value: "4", label: '甘肃省' },
                        { value: "6", label: '广东省' },
                        { value: "7", label: '广西壮族自治区' },
                        { value: "8", label: '贵州省' },
                        { value: "9", label: '海南省' },
                        { value: "10", label: '河北省' },
                        { value: "11", label: '河南省' },
                        { value:" 12", label: '黑龙江省' },
                        { value: 13, label: '湖北省' },
                        { value: 14, label: '湖南省' },
                        { value: 15, label: '吉林省' },
                        { value: 16, label: '江苏省' },
                        { value: 17, label: '江西省' },
                        { value: 18, label: '辽宁省' },
                        { value: 19, label: '内蒙古自治区' },
                        { value: 20, label: '宁夏回族自治区' },
                        { value: 21, label: '青海省' },
                        { value: 22, label: '山东省' },
                        { value: 23, label: '山西省' },
                        { value: 24, label: '陕西省' },
                        { value: 25, label: '上海市' },
                        { value: 26, label: '四川省' },
                        { value: 27, label: '天津市' },
                        { value: 28, label: '西藏自治区' },
                        { value: 29, label: '新疆维吾尔自治区' },
                        { value: 30, label: '云南省' },
                        { value: 31, label: '浙江省' },
                        { value: 32, label: '重庆市' },
                        { value: 33, label: '香港特别行政区' },
                        { value: 34, label: '澳门特别行政区' },
                        { value: 35, label: '台湾省' }],
                      
        }
    },
    methods:{
        showDialog(){
            this.dialogVisible = true
        },
        query(){
           this.$axios.get("/ad/directOrder/getDirectOrders")
           .then(res=>{
            this.tableData = res.data.data
           })
        },
        submit(){

          let params = {};
          params.data = this.customerOrder;
          params.processId = "claimExpenseProcess"
          params.businessKey = "order"
      
           this.$axios.post("ap/process/startOrder",params)
           .then(res=>{
              if(res.status == 404){
                console.log(res.status)
                this.$router.push({ path: '/404'});
              }
           })
        }
    },
    created(){
       this.lading.orderId =  this.$route.query.orderId
       console.log( this.lading.orderId)
       this.query()
    }
}
</script>

<style>
.custom-date-picker .el-input {
  width: 120px; /* 设置宽度，这里使用 200px 作为示例 */
}

</style>